<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>learn-css</title>
    <style>
        body {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
        }

        nav {
            width: 20%;
        }

        main {
            width: 80%;
            border-left: 5px darkgray solid;
        }

        #irm {
        }
    </style>
</head>
<body>
<nav>
    <ul>
        <li><a target="ifm" href="arrows.html">箭头</a></li>
        <li><a target="ifm" href="bevel-babel.html">斜角便签</a></li>
        <li><a target="ifm" href="btn.html">按钮</a></li>
        <li><a target="ifm" href="card.html">卡片</a></li>
        <li><a target="ifm" href="card-flip.html">卡片翻转</a></li>
        <li><a target="ifm" href="cycle-bg.html">圆形背景</a></li>
        <li><a target="ifm" href="dynamic-square.html">动态正方形</a></li>
        <li><a target="ifm" href="gradual-change.html">渐变</a></li>
        <li><a target="ifm" href="ground-glass.html">模糊效果（毛玻璃）</a></li>
        <li><a target="ifm" href="img.html">图片</a></li>
        <li><a target="ifm" href="img-merge.html">图像拼合</a></li>
        <li><a target="ifm" href="light-ball.html">发光球</a></li>
        <li><a target="ifm" href="loading.html">加载...</a></li>
        <li><a target="ifm" href="note.html">便签</a></li>
        <li><a target="ifm" href="radar-scan.html">雷达扫描</a></li>
        <li><a target="ifm" href="select.html">下拉</a></li>
        <li><a target="ifm" href="skeleton.html">骨架</a></li>
        <li><a target="ifm" href="tip.html">起泡提示</a></li>
        <li><a target="ifm" href="tip-stripe.html">提示条</a></li>
        <li><a target="ifm" href="transform.html">变形</a></li>
    </ul>
</nav>

<main>
    <iframe id="irm" name="ifm" width="1300px" height="700px" frameborder="0"></iframe>
</main>
<script type="text/javascript">
</script>

</body>
</html>
